body {
    margin: 0;
    padding: 0;
    background: #202020;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    color:#FFFFFF;
}
a {}
a:hover { text-decoration: none;}
#container{
   width:100%;
   height:100%;
}

/* Header Bar*/
#header{
    background:#1b1b1b;
    width:100%;
    height:53px;
    display:block;
    position: relative;  
    position: fixed;
    top: 0;
    z-index: 999; 
-webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow:    0px 3px 10px rgba(0, 0, 0, 0.6);
box-shadow:         0px 3px 10px rgba(0, 0, 0, 0.6);
}
#header .menu{ float:left; padding: 9px;}
#header  .nav-back{ line-height: 33px; 
background-color: #222222;

}
#header  .nav-back:hover{ background-color: #0088CC; }
#header  .nav-back a:hover{color:#FFFFFF}
#header .nav a, #header  .nav-back a {
    display: table-cell;
    vertical-align: middle;
    padding: 10px; 
    font-weight: bold; 
}
 .logo {margin-left: 10px;}
 .logo a {
    display: table-cell;
    vertical-align: middle;
}
#header .userbox{ padding: 9px; }
#header .userbox .btn-primary{ background: none;  border: none; background: #333333;}
#header .userbox  a.dropdown-toggle{
    padding: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;   
}


#header .userbox .open  a.dropdown-toggle{
 background: #FFFFFF;
 padding: 2px;
 border: none;
 -webkit-box-shadow: none;
-moz-box-shadow:    none;
box-shadow:         none;
    -moz-border-radius: 2px 2px 0px 0px;
    -webkit-border-radius:  2px 2px 0px 0px;
    border-radius:  2px 2px 0px 0px;
}
#header span.name{    
    border-bottom: 1px dashed #EFEFEF;
    color: #0088CC;
    display: block;
    padding: 5px 0 5px 20px; }

#header .userbox  a.dropdown-toggle .dropdown-menu:after{
    border-bottom: 6px solid #FFFFFF;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;   
    
}
#header .userbox  a.dropdown-toggle img { width:30px; height: 30px;}
#header .userbox  .dropdown-menu { 
float:right; right:0; left:auto; padding: 2px; 
top:32px;
    -moz-border-radius: 3px 0px 3px 3px;
    -webkit-border-radius: 3px 0px 3px 3px;
    border-radius: 3px 0px 3px 3px;
    border: none;

}

/* Content box*/
article{
   width:100%;
   height:100%;
   min-height: 600px;
   margin-top: 53px;
   position: relative;
}
/*.ar_one{padding:0% 3% 0 3%; margin-top: 3%;}*/
.ar_one{padding:0; margin-top: 3%;}
.ar_one .avatar{ display:table-cell;  float: left; padding: 8px; vertical-align: middle;}
.ar_one .avatar img{ height: 40px; width: auto;}
.ar_one .message{float: left;display:block; color: #009cff; padding: 4px;}



/* Navigator*/
 .touchcarousel-wrapper{  
height: 100%;
    overflow: hidden;
    position: relative;
    width: 100%;
}

#nav .touchcarousel-item.last {
    margin-right: 0 !important; display: none;
}
#nav .touchcarousel-container {
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: relative;
}
.navbar {
    width:100%; z-index: 9;
     
    background-image: url("assets/img/nav-bar-bg.png"), url("assets/img/nav-bar-bg.png");
    background-repeat: no-repeat;
    background-size: 100% 3px, 100% 3px;
    background-position: top center, bottom center;             
}
.navbar ul.nav{ width: 100%; text-align: center; height: 55px;}
.navbar .nav > li{ display: inline-table; float: none;}
.navbar .input-append, .navbar .input-prepend {  margin-bottom: 14px;}
#nav .nav > li{float: left;}
.navbar .nav > li > a{  background:none; color: #FFFFFF;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
          text-shadow: none; 
          padding: 20px 15px;
          font-size: 1.2em;
          margin: 1px 0 0;        
}

.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus, .navbar .nav > li > a:hover, .navbar .nav li.dropdown.open > .dropdown-toggle {
  color: #FFFFFF;
    -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
     border-radius: 0;
    margin-bottom: 2px;
 background: url("assets/img/nav-menu-bg-hover.png") no-repeat scroll center center transparent;
 background-size: 100% 106%;
text-shadow: 0 0 10px #4b88ff, 0 0 20px #4b88ff, 0 0 30px #4b88ff, 0 0 40px #4b88ff, 0 0 70px #4b88ff, 0 0 80px #4b88ff, 0 0 100px #4b88ff, 0 0 150px #4b88ff;
}
 .fillwidth { width: 100%; height: auto; } .fillheight { height: 100%; width: auto; }
.ar_five{margin:3% 0 0 3%;}
.ar_five{ list-style: none;}
.ar_five li{ padding: 0; width:160px;}
.ar_five li.last{ padding: 0;  float: left;}
.ar_five .frame_thumb { width:100%; overflow: hidden; position: relative;}
.ar_five .frame_thumb img { /*min-width: 100%;*/ height: auto;}
.ar_five .title{ font-size: 1em; text-align: center; color: #FFFFFF; padding: 10px 0;}
.ar_five .frame_thumb:hover {
    box-shadow: 0 0 5px 2px rgba(30, 167, 214, 0.7), 0 0 5px 5px rgba(30, 167, 214, 0.6), 0 0 7px 10px rgba(30, 167, 214, 0.3);
}
span.thai-sound {
    background: url("assets/img/thai-sound.png") repeat scroll 0 0 transparent;
}
span.thai-sub {
    background: url("assets/img/thai-sub.png") repeat scroll 0 0 transparent;
}


span.thai-sub, span.thai-sound {
    bottom: 0;
    display: block;
    height: 75px;
    position: absolute;
    right: 0;
    width: 120px;
}

span.thai-sub {
    background: url("assets/img/thai-sub.png") repeat scroll 0 0 transparent;
}


span.movie-zoom {
    background: url("assets/img/movie_zoom.png") repeat scroll 0 0 transparent;
}
span.movie-zoom {
    top: 0;
    display: block;
    height: 52px;
    position: absolute;
    left: 0;
    width: 88px;
}


span.thai-sound-sub {
    background: url("assets/img/thai-sound-sub.png") no-repeat  right bottom transparent;
}
span.thai-sound-sub {
    bottom: 0;
    display: block;
    height: 66px;
    position: absolute;
    right: 0;
    width: 111px;
}

.ar_four{margin:1% 0 0 5%;}
.ar_four .one_fourth { margin-right: 2%;}
.ar_four .one_fourth a:hover img{ }
.movies .one_fifth,.home .one_fifth{ /*height: 330px;*/ display: inline-block; vertical-align: top;  }
.movies .ar_five .title{ height: 80px; display: block; overflow: hidden;} 




/*Home Page*/
.home{}
.home .ar_five{margin:4% 0 0 3%;}

/*Detail Page   */
.cover{
    z-index: 1;
    height: 340px; display: block;   overflow: hidden;
}
.cover img{ width:100%}
.detail{ position: relative; min-height: 250px; }
.detail .one_fifth{ min-height: 340px;}
.detail .one_fifth .float{ /*position: absolute; top:-120px;*/ margin-top: -120px;}
.detail .four_fifth{ float: right;
width:740px;
width: calc(100% - 8% - 163px);    width: -webkit-calc(100% - 8% - 163px);
}
.detail .one_fifth{ height: 320px; display: block; }
.detail h2{ margin: 0; }
.detail h2.sub{ margin: 0; font-size: 0.9em; line-height: 0.9em; margin-bottom: 10px;}
.detail .meta{ margin: 0 0 20px 0;}
.detail .description{}
.detail span.head{ font-size: 20px;}
.detail .frame_thumb {
      min-width: 100%; height: 232px; 
    box-shadow: 0 0 5px 2px rgba(30, 167, 214, 0.7), 0 0 5px 5px rgba(30, 167, 214, 0.6), 0 0 7px 10px rgba(30, 167, 214, 0.3);
}
.detail .one_fifth{ height: 320px; float: left; }
.detail .play{ margin-top: 20px;}
 .play:hover{
         -moz-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 5px 2px rgba(30, 167, 214, 0.7), 0 0 5px 5px rgba(30, 167, 214, 0.6), 0 0 7px 10px rgba(30, 167, 214, 0.3);
}
.detail .video{ width:90%; margin: 0 0 0 5%; position: absolute; top:60px; z-index: 9; }
.detail .video video{ width:100%; height: auto;}
.glow{
    box-shadow: 0 0 5px 2px rgba(30, 167, 214, 0.7), 0 0 5px 5px rgba(30, 167, 214, 0.6), 0 0 7px 10px rgba(30, 167, 214, 0.3);
    margin-bottom: 10px;
}


.stream_four .span2{ background:#3b5564; margin-bottom: 10px;}
.row-fluid [class*="span"]:nth-child(6n+1) {margin-left: 0;}


/* Avartar Toggle*/
#toggle {
    height:30px;
    position:relative;
    z-index:2;
}
#toggle a ,#toggle a:hover{ position: absolute; right:3%; bottom: 0; color:#ffffff; text-decoration: none;}

#box {
    position: absolute;
    overflow:hidden; 
}
.toggle_button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    color: #ffffff;
    padding: 10px 30px;
    background: -moz-linear-gradient(
        top,
        #4f4f4f 0%,
        #3b3b3b 20%,
        #000000);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#4f4f4f),
        color-stop(0.20, #3b3b3b),
        to(#000000));
    -moz-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
}

/*Login Page   */
.form-signin {
    color:#333333
    background-color: #FFFFFF;
    border-radius: 5px 5px 5px 5px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    margin: 0 auto;
    max-width: 50%;
    padding: 5%;
}
.form-signin h2{ text-align: center;}

.form-signin .facebook_button{ text-align: center; }

.form-signin .divider {
    background: url("assets/img/divider.png") no-repeat 50% 100% transparent;
    background-size:100% 5px;
    height: 8px;   
}
.form-signin .inputbox{ max-width: 380px; margin: 0 auto; }
.form-signin .facebook_button,.form-signin .divider,.form-signin .inputbox{ 
    padding: 28px 0 0 0;;  
}
.form-signin .inputbox input[type="text"],.form-signin .inputbox input[type="password"]{ height: 50px; background: #464646; border: 1px solid #999999; color:#CCCCCC;  }
.form-signin .inputbox  input[type="text"]:focus,.form-signin .inputbox  input[type="password"]:focus{
color:#FFFFFF;    
 }
.form-signin .btn-primary{ background: none; border: 1px solid #0390ea; color:#0390ea}


/*Stream Page*/
.stream{}
.stream .one_fifth{  height: 220px; display: inline-block; }
.stream .frame_thumb{   background: #FFFFFF; display: block; overflow: hidden;
    -moz-border-radius: 4px ;
    -webkit-border-radius: 4px ;
    border-radius: 4px ;

}
.stream .frame_thumb img{
    height: auto;
    width: 96%;
    padding: 2%;
}
.stream .frame_thumb a{
    display: table-cell;
    vertical-align: middle;
} 
.stream .frame_thumb,.stream .frame_thumb a{ height: 163px ; width:163px;}

.stream .frame_thumb .title{display: block; height: 40px; overflow: hidden;}
.stream_four{padding: 3%;  min-height: 600px; background: rgba(0, 0, 0, 0.8); Opacity set to 0.8; }
.stream_four .pad{padding:10%; }
.stream_four .one_fourth {width:21%;}
.stream_four ul.menu{  }
.stream_four ul.menu li{  font-size: 1.2em;  text-transform: uppercase; clear: both; display: block; width: 100%; padding: 0 0 10px 0; text-align: right;}
.stream_four ul.menu li a{color:#FFFFFF;}
.stream_four .three_fourth {width:72%;}

.stream .video{ width:90%; margin: 0 0 0 5%; position: absolute; top:60px; z-index: 9;}
 .video video{ width:100%; height: auto;}
 
/*.stream_play { position: relative;}
.stream_play #mainData{position: relative; bottom:0; margin-bottom: -180px; height:180px; overflow: hidden;}
  */
.stream_play .video{ position: relative; top:10px}
#carousel-stream{ width:auto; margin: 0;   height:140px; display: block;}
#carousel-stream.touchcarousel .touchcarousel-container{ height:280px}
#carousel-stream .touchcarousel-wrapper{ padding: 20px 0}
#carousel-stream.touchcarousel .touchcarousel-item{ margin: 0 10px;}
#carousel-stream .arrow-holder,#carousel-stream .scrollbar-holder{ display: none;}
#carousel-stream .one_fifth{  height: 140px;width:100px; }

#carousel-stream .frame_thumb,#carousel-stream .frame_thumb a{ height: 100px ; width:100px;
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}
#carousel-stream .title{ font-size: 11px; line-height: 14px; padding: 4px 0;}

/*Settings Form*/
.settings .form{
    margin-right: 3%;
    
}

.settings .form legend{ color: #999; border-bottom: 1px solid #333;}

